import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'
import Authors from '../../ch/components/Authors.vue'

<Meta
  title="Components/Authors"
  component={Authors}
  argTypes={{
    bare:    { control: { type: 'boolean'} },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Authors },
  template: '<Authors :authors="authors" :bare="bare" />'
})


# Authors


## Example

If most of the authors have a picture, we display their images.
When only a few images are missing, they are replaced by the initials of the authors.
If no initials are provided, the disc contains the `User` svg icon.

The default author component include horizontal lines and padding. Use the `bare` prop to remove these properties.

<Canvas>
  <Story
    name="Example"
    args={{
      authors:[
        {
          name: 'Maria Muster',
          img: 'https://picsum.photos/120/120/?image=29',
        },
        {
          name: 'Hans Höllman',
          initials: 'HH'
        },
        {
          name: 'Jean-Jaques Langerename',
          img: 'https://picsum.photos/120/120/?image=30',
          url: '#'
        },
        {
          name: 'Sofia de Souza',
        },
        {
          name: 'Katja Anna-Beerli',
          img: 'https://picsum.photos/120/120/?image=32',
        }
      ]
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Example" />


## Example without images

Author images are not displayed in two cases
- When none of the authors or most of them don't have an image
- When author list is very large (more than 7)

<Canvas>
  <Story
    name="Example w/o pictures"
    args={{
      authors:[
        {
          name: 'Maria Muster',
        },
        {
          name: 'Jean-Jaques Langerename',
          url: '#'
        },
        {
          name: 'Hans Höllman',
        },
        {
          name: 'Katja Anna-Beerli',
        }
      ]
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>


## Example with one author

Example with only one author, with picture.

<Canvas>
  <Story
    name="One author"
    args={{
      authors:[
        {
          name: 'Jean-Marie Rolf-Arnaud-Peterson',
          img: 'https://picsum.photos/120/120/?image=29',
        },
      ]
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Example with one author, without image

Example with only one author, without picture.

<Canvas>
  <Story
    name="One author w/o picture"
    args={{
      authors:[
        {
          name: 'Maria Muster',
        }
      ]
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<a href="?path=/story/components-authors--example">
  Go to the Canvas Tab
</a>

---
<a href="?id=components-authors--example&args=&viewMode=story" target="_blank">
  Open page in full width in a new tab
</a>

